<template>
  <BasicModal
    @cancel="onClose"
    @register="registerModal"
    destroyOnClose
    :title="getTitle"
    :showCancelBtn="false"
    :showOkBtn="false"
    :canFullscreen="false"
    :centered="true"
    :width="800"
    :bodyStyle="{ height: 'calc(100vh - 120px)', padding: '3px', overflowY: 'auto' }"
    :loading="loading"
    loadingTip="请稍候，后台努力处理中..."
  >
    <table class="orderTable orderTableAlign" id="orderTable">
      <thead>
        <tr>
          <th colspan="6" align="left">
            <span class="float-left w-200px leading-30px">预订信息</span>
            <span class="float-right text-right w-220px mr-2">
              <a-button id="addButton" color="success" @click="handlePriceAdd()" :disabled="orderStatus == 'AUDIT'"> 修改 </a-button>
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="h-35px">
          <th>出团日期</th>
          <td><span id="_cfsj">{{ model.tourDate }}</span></td>
          <th>行程名称</th>
          <td colspan="3"><span id="_traveline">{{ model.goodsName }}</span></td>
        </tr>
        <tr class="h-35px">
          <th width="7%">成人价</th>
          <td width="16%"><span id="_crj" class="text-red-500 left font-bold" >{{ toNumber(model.goodsPrice) }}</span></td>
          <th width="7%">成人数</th>
          <td width="16%"><span id="_crs" class="left font-bold" >{{ model.num }}</span></td>
          <th width="7%">成人小计</th>
          <td width="16%"><span id="_crxj" class="text-red-500 left font-bold" >{{ toNumber(model.num * model.goodsPrice) }}</span></td>
        </tr>
        <tr class="h-35px" v-show="model.childNum > 0">
          <th>儿童价</th>
          <td><span id="_etj" class="text-red-500 left font-bold" >{{ toNumber(model.childPrice) }}</span></td>
          <th>儿童数</th>
          <td><span id="_ets" class="left font-bold" >{{ model.childNum }}</span></td>
          <th>儿童小计</th>
          <td><span id="_etxj" class="text-red-500 left font-bold" >{{ toNumber(model.childNum * model.childPrice) }}</span></td>
        </tr>
        <tr class="h-35px">
          <th>会员返</th>
          <td><span id="_crj" class="text-green-500 left font-bold" >{{ toNumber(model.priceVip) }}</span></td>
          <th>同行返</th>
          <td><span id="_crs" class="text-green-500 left font-bold" >{{ toNumber(model.priceRoom) }}</span></td>
          <th>优惠返</th>
          <td><span id="_crs" class="text-green-500 left font-bold" >{{ toNumber(priceDetail.discountPrice) }}</span></td>
        </tr>
        <tr class="h-35px">
          <th>增项金</th>
          <td><span id="_zx" class="text-red-500 left font-bold" >{{ toNumber(model.addPrice) }}</span></td>
          <th>说明</th>
          <td colspan="4"><span id="_addRemark">{{ model.addMark }}</span></td>
        </tr>
        <tr class="h-35px">
          <th>减项金</th>
          <td><span id="_jx" class="text-blue-500 left font-bold">{{ toNumber(model.subPrice) }}</span></td>
          <th>说明</th>
          <td colspan="4"><span id="_subRemark">{{ model.subMark }}</span></td>
        </tr>
        <tr class="h-35px">
          <th>下单日期</th>
          <td><span id="_ydsj">{{ model.createTime }}</span></td>
          <th>会员</th>
          <td colspan="3"><span id="_remark">{{ order.memberPath }}</span></td>
        </tr>
        <tr class="h-35px">
          <th>关联订单</th>
          <td><span id="_ydsj">{{ model.orderId }}</span></td>
          <th>备注</th>
          <td colspan="3"><span id="_remark">{{ model.remark }}</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6" class="text-right h-40px pl-30px">
            <span class="">状态: </span><span class="mr-15px font-bold text-red-500 text-xl">{{ statusFmt }}</span>
            <span class="">总人数: </span><span class="mr-15px font-bold text-xl">{{ model.num + model.childNum }}</span>
            <span class="">总团款: </span><span class="mr-15px font-bold text-red-500 text-xl">{{ toNumber(priceDetail.goodsPrice) }}</span>
            <span class="">增项金: </span><span class="mr-15px font-bold text-red-500 text-xl">{{ toNumber(priceDetail.addPrice) }}</span>
            <span class="">优惠款: </span><span class="mr-15px font-bold text-green-500 text-xl">{{ toNumber(priceDetail.discountPrice * -1) }}</span>
            <span class="">减项金: </span><span class="mr-15px font-bold text-blue-500 text-xl">{{ toNumber(priceDetail.subPrice * -1) }}</span>
            <span class="">实收款: </span><span class="mr-8px font-bold text-red-500 text-xl">{{ toNumber(priceDetail.flowPrice) }}</span>
          </td>
        </tr>
      </tfoot>
    </table>

    <div class="listtab1" id="con_menu_2">
      <table class="orderTable" id="brtable">
        <thead>
          <tr>
            <th colspan="14">
              <span class="float-left w-200px leading-30px">游客信息</span>
              <span class="float-right text-right w-220px mr-2">
                <a-button type="primary" color="success" @click="handleVisitorAdd()"> 添加 </a-button>
                <a-button type="primary" @click="handleVisitorAdd()" class="ml-10px" :disabled="visitorOption.btnEdtDisabled"> 编辑 </a-button>
                <a-button type="primary" color="error" @click="handleVisitorDelete()" class="ml-10px" :disabled="visitorOption.btnDelDisabled"> 删除 </a-button>
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="listBg">
            <th width="30"></th>
            <th width="130">游客姓名</th>
            <th width="150">证件类型</th>
            <th width="220">证件号码</th>
            <th width="80">年龄</th>
            <th width="80">性别</th>
            <th width="140">联系电话</th>
          </tr>
        </tbody>
        <tbody v-for="(list, index) in visitorList" :key="index">
          <tr :class="[index % 2 == 0 ? 'listBg' : 'cor', visitorOption.nid == list.id ? 'selected' : '']" @click="selectVisitorTable(index, list.id)">
            <td>{{ index + 1}}</td>
            <td>{{ list.name }}</td>
            <td>{{ formatCertType(list.type) }}</td>
            <td>{{ list.number }}</td>
            <td>{{ list.age }}</td>
            <td>{{ list.sex == '0'? '女' : '男' }}</td>
            <td>{{ list.tel }}</td>
          </tr>
        </tbody>
        <!--tbody v-if="bankRunning.optionList && bankRunning.optionList.length == 0" >
        <tr><td colspan="7" class="text-red-500">请先录入银行流水信息中心！</td></tr>
        </tbody-->
      </table>
    </div>

  </BasicModal>

  <PriceModal @register="registerPriceModal" @success="priceOk"></PriceModal>
  <VisitorModal @register="registerVisitorModal" @success="priceOk"></VisitorModal>
</template>

<script lang="ts" name="OrderModal" setup>
import '/@/design/order.css';
import { ref, computed, unref, reactive } from "vue";
import { BasicModal, useModalInner, useModal } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { detail, visitorLoad, visitorDelete } from "/@/views/shop/orders/orders.api";
import { render } from "/@/utils/common/renderUtils";
import PriceModal from './PriceModal.vue';
import VisitorModal from './VisitorModal.vue';

let loading = ref(true); //

const { createMessage: $message } = useMessage();
// 声明Emits
const emit  = defineEmits(['success', 'register']);
//预订信息
const model = reactive<any>({})
//预订信息
const order = reactive<any>({})
//预订金额
const priceDetail = reactive<any>({})
//游客信息
const visitorList = reactive<any>([]); 
const isUpdate  = ref(true);

let isReload = ref<boolean>(false);
//界面控制数据
let orderSn = ref();
//界面控制数据
let orderStatus = ref();

const visitorOption = reactive<any>({
  nid: '',
  btnEdtDisabled: false,
  btnDelDisabled: false
});

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  setModalProps({confirmLoading: false});
  isUpdate.value = !!data?.isUpdate;
  orderSn.value  = data.record.id;
  loading.value  = false;
  isReload.value = false;
  await init();
});

//标题
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑 ' + model.orderSn));

function init() {
  if (!orderSn.value) {
    $message.warning('订单编号不能为空!');
    return;
  }
  var params = { orderSn: orderSn.value};
  detail(params).then((res) => {
    try {
      if (res.success != true) {order
        $message.warning(res.message);
        return false;
      }
      let result = res.result;
      let items  = result.orderItems;
      orderStatus.value = result.order.orderStatus
      Object.assign(order, result.order);
      Object.assign(model, items[0], {remark: result.order.remark});
      Object.assign(priceDetail, result.order.priceDetailDTO);
      loadVisitorList();
    } catch (e) {
      $message.error('initData : ' + e);
      return false;
    }
  }).finally(() => {
    //data.loading = false
  });

}

//标题
const statusFmt = computed(() => {
  var text = unref(orderStatus) 
  if (!text) {
    return ""
  }
  let color = "default";
  if (text == 'TAKE') {
    color = "green";
  } else if (text == 'AUDIT') {
    color = "red";
  } else if (text == 'CANCEL') {
    color = "cyan"
  } else if (text == 'REPAEL') {
    color = "purple"
  } else if (text == 'FINISH') {
    color = "warning"
  }
  //return text;
  return render.renderDictText(text, 'orderStatus');

});

function loadVisitorList() {
  //清空
  Object.assign(visitorList, {});
  visitorList.length = 0;
  var orderSn = model.orderSn;
  if (orderSn == '' || orderSn == null) {
    return false;
  }
  var params = { orderSn: orderSn };
  visitorLoad(params).then((res) => {
    if (res.success != true) {
      return false;
    }
    Object.assign(visitorList, res.result);
  });
}

/* 查看 订单详情
  * 作者：qdl
  * 日期：2023-05-23
  */
//详细订单 ----------按钮事件------------------------------------------------
const [registerPriceModal, { openModal: openPriceModal }] = useModal();
function handlePriceAdd() {
  var orderSn = model.orderSn;
  if (orderSn == '' || orderSn == null) {
    $message.error("操作失败，订单数据异常！");
    return false;
  }
  openPriceModal(true, model)
}

function priceOk() {
  init();
  isReload.value = true; //变量在 curdtools.js 里
}

/* 查看 订单详情
  * 作者：qdl
  * 日期：2023-05-23
  */
//详细订单
const [registerVisitorModal, { openModal: openVisitorModal }] = useModal();
function handleVisitorAdd() {
  var orderSn = model.orderSn;
  if (orderSn == '' || orderSn == null) {
    return orderSn;
  }

  let record = { id: null, orderSn: orderSn, isUpdate: false };
  if (visitorOption.nid) {
    record.id = visitorOption.nid;
    record.isUpdate = true;
    if (!record.id) {
      $message.error("操作失败：编号不能空！");
      return
    }
  } else {
    record.id = null;
    record.isUpdate = false;
  } 
  openVisitorModal(true, record)
}

function handleVisitorDelete() {
  let me = visitorOption
  if (!me.nid) {
    $message.warning('请选择删除的记录！')
    return
  }
  let params = { id: me.nid };
  visitorDelete(params, priceOk)
}

function selectVisitorTable(index, id) {
  let me = visitorOption
  if (me.nid == id) {
    me.nid = '';
    me.btnEdtDisabled = true;
    me.btnDelDisabled = true;
  } else {
    me.nid = id;
    me.btnEdtDisabled = false;
    me.btnDelDisabled = false;
  }
}

function toNumber(v) {
  let n = 0;
  if (v) {
    n = v;
  }
  return Number(n).toFixed(1);
}

// Cancel event
function onClose() {
  if (isReload.value) {
    emit('success');
  }
}

//--------------------
function formatCertType (value) {
  var text = ''
  switch (value) {
    case '1':
      text = '身份证'
      break;
    case '2':
      text = '护照'
      break;
    case '3':
      text = '军官证'
      break;
    case '4':
      text = '港澳通行证'
      break;
    case '5':
      text = '台湾通行证'
      break;
    case '6':
      text = '台胞证'
      break;
    case '7':
      text = '回乡证'
      break;
  }
  return text;
}
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select-picture-card) {
  width: 360px!important
}
</style>
